/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-05-25 13:48:55
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-05-28 17:57:18
 */
// These two containers are siblings in the DOM
import React, { useEffect, useRef } from "react";
import Mask from "./useMask";

export default class Parent extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = { clicks: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This will fire when the button in Child is clicked,
    // updating Parent's state, even though button
    // is not direct descendant in the DOM.
    this.setState((prevState) => ({
      clicks: prevState.clicks + 1
    }));
  }

  componentWillUnmount() {
    console.log("this.el1111111111");
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>ChildChildChildChildChildChild</p>
        <Mask>
          <Child />
        </Mask>
      </div>
    );
  }
}

function Child() {
  // The click event on this button will bubble up to parent,
  // because there is no 'onClick' attribute defined
  return (
    <div className="modal">
      <button>Click</button>
    </div>
  );
}
